<template>
  <div class="app-container">
    <el-row style="border:1px solid #d8dce5;">
      <el-col :span="6">
        <div class="grid-content bg-white" style="margin-right:10px;border-right:thick double #ff0000;">
          <span style="display: block">选择用户</span>
          <div v-for="user in users" style="display: block;margin:5px;">
            <el-radio
              :key="user.id"
              v-model="checkedUser"
              :label="user.id"
              :value="user.id"
              border
              @change="handleCheckedUserChange"
            >{{ user.is_superuser ?
              user.username+'-超级用户':user.username }}({{ user.last_name+user.first_name }})
            </el-radio>
            <el-switch
              v-model="user.is_active"
              style="float: right"
              active-text="启用"
              inactive-text="禁用"
              @change="handleForbidden(user.id)"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-white" style="display: block;margin:5px;">
          <el-row>
            <span style="display: block">权限列表</span>
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;" />
            <el-checkbox-group v-model="checkedGroups" v-loading="listLoading" @change="handleCheckedGroupChange">
              <el-checkbox v-for="group in groups" :key="group.id" :label="group.id" :value="group.id">{{ group.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-row>
          <el-row style="margin-top: 10px">
            <span style="display: block">用户配置</span>
            <el-form :model="profile" label-position="left" label-width="120px">
              <el-form-item label="电话">
                <el-input v-model="profile.phone" />
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="handleModifyUserProfile">修改</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;border:1px solid red;">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <span style="display: block">被禁用户</span>
          <div v-for="user in forbiddens" style="display: block;margin:5px;">
            <el-radio
              :key="user.id"
              v-model="checkedForbiddenUser"
              :label="user.id"
              :value="user.id"
              border
            >{{ user.username }}({{ user.last_name+user.first_name }})
            </el-radio>
            <el-switch
              v-model="user.is_active"
              style="float: right"
              active-text="启用"
              inactive-text="禁用"
              @change="handleForbidden(user.id)"
            />
          </div>
        </div>

      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple" />

      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  fetch_users,
  modify_user_groups,
  fetch_groups,
  user_taggle,
  fetch_user_profile,
  moidfy_user_profile
} from '@/api/manage/projectuser.js'

export default {
  name: 'Usergroup',
  data() {
    return {
      data: [],
      listLoading: true,
      kwInput: '',
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,
      target_web_id: '',

      checkedUser: '',
      users: [],

      checkAll: false,
      checkedGroups: [],
      groups: [],
      isIndeterminate: true,
      forbiddens: [],
      profile: {
        'pk': '',
        'phone': ''
      },
      checkedForbiddenUser: ''
    }
  },
  created() {
    console.log('getlist')
    this.getList()
  },
  methods: {
    getList() {
      fetch_users(JSON.stringify({ project_id: '' })).then((response) => {
        this.users = response.data.users
        this.forbiddens = response.data.forbiddens
      }).catch(error => {
        console.log(error)
      })
    },
    handleModifyUserProfile() {
      this.profile['pk'] = this.checkedUser
      moidfy_user_profile(this.profile).then((response) => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
        this.listLoading = false
      }).catch(error => {
        this.$notify({
          title: '失败',
          message: '修改失败',
          type: 'error',
          duration: 2000
        })
        this.listLoading = false
        console.log(error)
      })
    },
    handleFetch_user_profile() {
      fetch_user_profile(JSON.stringify({ pk: this.checkedUser })).then((response) => {
        if (response.data) {
          this.profile.phone = response.data.phone
        } else {
          this.profile.phone = ''
        }

        console.log(this.profile)
        this.listLoading = false
      }).catch(error => {
        this.listLoading = false
        console.log(error)
      })
    },
    handleCheckedUserChange(val) {
      this.listLoading = true
      fetch_groups(JSON.stringify({ pk: this.checkedUser })).then((response) => {
        this.checkedGroups = response.data.checkedGroups
        this.groups = response.data.groups
        this.listLoading = false
      }).catch(error => {
        this.listLoading = false
        console.log(error)
      })
      this.handleFetch_user_profile()
    },
    handleCheckAllChange(val) {
      console.log(this.groups.map(function(item) {
        return item.id
      }))
      this.checkedGroups = val ? this.groups.map(function(item) {
        return item.id
      }) : []
      this.isIndeterminate = false
      modify_user_groups(JSON.stringify({
        pk: this.checkedUser,
        groups: this.checkedGroups
      })).then((response) => {
        this.checkedGroups = response.data.checkedGroups
        this.groups = response.data.groups
      }).catch(error => {
        console.log(error)
      })
    },
    handleCheckedGroupChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.users.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.users.length
      modify_user_groups(JSON.stringify({
        pk: this.checkedUser,
        groups: this.checkedGroups
      })).then((response) => {
        this.checkedGroups = response.data.checkedGroups
        this.groups = response.data.groups
      }).catch(error => {
        console.log(error)
      })
    },
    handleForbidden(uid) {
      user_taggle(JSON.stringify({
        pk: uid
      })).then((response) => {
        this.getList()
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
